Tengo una función que funciona según lo previsto cuando se llama "onClick", pero omite una declaración if cuando se llama con "onKeyPress".

contexto

solo imagine una entrada donde pueda buscar recetas de comida (por ejemplo, "pizza") y obtenga una lista de recetas de una API con las recetas.

todo el código relevante explicado

↓ Esta variable almacena un valor booleano. Comprueba si una consulta de una entrada está incluida en alguno de los títulos de la lista de recetas que se muestra actualmente.

 const recipeListHasQuery = recipectx.data.map((recipe: any) => { return recipe.title.toLowerCase().includes(query); })

Si al menos uno de los títulos de recetas de la lista no incluye la consulta que estamos buscando, podemos borrar la lista.

(básicamente, si buscó "pizza" y ahora busca "hamburguesa" y no hay "hamburguesa" en ningún título de las recetas de pizza, podemos borrar la lista y mostrar las recetas de hamburguesas)

↓ Esta función funciona cuando se llama "onClick" no funciona en "onKeyPress".

 const clearView = () => { console.log('i log on enter') ↓ does not work on enter if (!recipeListHasQuery.includes(true)) { const recipeList = document.querySelector(".recipe__list") as HTMLElement; recipeList!.innerHTML = ""; }

↓ Esta función funciona cuando se llama "onKeyPress" pero omite la instrucción if

 const HandleInputOnKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") { HandleInputChange(event as any); ← this works fine on "Enter" // clearView(); ← works on "Enter" but omits the if statement ↓ just typing it out does not work either if (!recipeListHasQuery.includes(true)) { const recipeList = document.querySelector(".recipe__list") as HTMLElement; recipeList!.innerHTML = ""; } } };

entonces el problema es que en lugar de tener una lista de recetas, con cada consulta, agregas una nueva

↓ Esta es la forma en que estoy llamando a las funciones.

 <form> <input onKeyPress={HandleInputOnKeyPress}></input> <button onClick={clearView}> Search </button> </form>